<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="always" name="referrer">
    <meta name="description"
        content="皮兔工具箱（perfectTool）为桌面应用。主要工具包含：1) 获取IP地址;2) 批量重命名;3) 网页资源爬取;4) 批量导出文件名;5) 二维码生成与解码;6) 精灵图合成和拆分;7) 图片批量压缩(基于TinyPng)等功能。">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <title>皮兔工具箱</title>
    <style>
        html,
        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        body {
            overflow-y: scroll;
        }

        .container {
            position: relative;
            overflow: hidden;
        }

        .bg {
            width: 100vw;
            height: 680px;
            border-bottom: 1px solid #d9d9d9;
            background: url(./home/bg.png) no-repeat, linear-gradient(-180deg, #fff, #fff8f6);
            background-size: cover;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            margin: 0;
        }

        #content {
            margin: 0 auto;
            width: 1000px;
            text-align: left;
        }

        #content p:nth-child(3) {
            text-align: center;
        }

        img[alt=snapshot] {
            display: block;
            width: 800px;
            margin: 0 auto;
            margin-top: 30px;
            color: #ccc;
            border-radius: 3px;
            text-align: center;
        }

        #content a {
            text-decoration: none;
            background-color: transparent;
            outline: none;
            cursor: pointer;
            transition: color .3s;
            color: #fd6b29;
        }

        .hidden {
            display: none;
            opacity: 0;
            height: 0;
            width: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="hidden">皮兔工具箱</h1>
        <h2 class="hidden">获取IP地址</h2>
        <h2 class="hidden">批量重命名</h2>
        <h2 class="hidden">密码保险柜</h2>
        <h2 class="hidden">网页资源爬取</h2>
        <h2 class="hidden">批量导出文件名</h2>
        <h2 class="hidden">二维码生成与解码</h2>
        <h2 class="hidden">精灵图合成和拆分</h2>
        <h2 class="hidden">图片批量压缩(基于TinyPng)</h2>

        <p class="bg"></p>
        <div id="content"></div>
    </div>
</body>
<script src="./home/js/marked.min.js"></script>
<script type="text/javascript">
    const mdPath = './README.md?v=2023';

    function showMarkdown(path) {
        var xmlHttp;
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        } else {
            xmlHttp = new ActiveXObject('Microsoft.XMLHttp');
        }

        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                document.getElementById('content').innerHTML = marked.parse(xmlHttp.responseText);
            }
        }
        // 向服务器发送请求
        xmlHttp.open('GET', path, true);
        xmlHttp.send();
    }
    showMarkdown(mdPath);
</script>

</html>